<template>
    <div>
        <div>msg is {{msg}}</div>
        <anchored-heading1 :level="3">{{msg}}</anchored-heading1>
        <anchored-heading2>render函数</anchored-heading2>
        <anchored-heading3>jsx</anchored-heading3>

        <!-- 函数是组件 -->
        <VNode :vnode="getJSXSpan()"/>
        <VNode :vnode="getAnchoredHeading(4)"/>
    </div>
</template>

<script>
//导入子组件
import AnchoredHeading1 from './AnchoredHeading1'
import AnchoredHeading2 from './AnchoredHeading2'
import AnchoredHeading3 from './AnchoredHeading3'
export default {
    data(){
        return {
            msg:'hello world'
        }
    },
    methods:{
        getJSXSpan(){
            return <span>JSX SPAN</span>
        },
        getAnchoredHeading(level){
            const Tag = `h${level}`
            return <Tag>HELLO WORLD</Tag>
        }
    },
    components:{
        AnchoredHeading1,
        AnchoredHeading2,
        AnchoredHeading3,
        VNode:{
            functional:true,
            render:(h,ctx) => ctx.props.vnode
        }
    }
}
</script>